import {useState} from "react";
import {Modal, ModalProps, Spin, Upload, UploadProps} from "antd";
import {FileTextOutlined} from "@ant-design/icons";

export default function (props: ModalProps & {onFinish: ()=>void;}) {

  const [loading, setLoading] = useState(false);
  const uploadProps: UploadProps = {
    name: 'file',
    accept: "image/*",
    maxCount: 1,
    showUploadList: false,
    disabled: loading,
    onChange() {
      setLoading(true);
      setTimeout(() => {
        setLoading(false);
        props.onFinish();
      }, 1000);
    }
  };

  return (
    <Modal width={400} title='进货单上传' {...props} footer={false}>
      <Upload.Dragger {...uploadProps}>
        <Spin spinning={loading} tip={'上传中...'}>
          <p className="ant-upload-drag-icon">
            <FileTextOutlined/>
          </p>
          <p className="ant-upload-text">请单击或拖入进货单</p>
        </Spin>
      </Upload.Dragger>
    </Modal>
  );
}
